<template>
  <!-- 课程概述 -->
  <div class="course-overview bg-fff display-flex cursor-pointer">
    <div class="overview-left">
      <div
        v-for="(item, index) in sections"
        :key="index"
        :class="['nav-item', { active: activeIndex === index }]"
        @click="scrollToSection(index)"
      >
        {{ item.title }}
      </div>
    </div>
    <div class="overview-right">
      <div
        v-for="(item, index) in sections"
        :key="index"
        :ref="(el) => setSectionRef(el, index)"
        class="content-section"
        :id="'section-' + index"
      >
        <p class="right-title">{{ item.title }}</p>
        <p>{{ item.content }}</p>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
const props = defineProps<{
  sections: Array<{ title: string; content: string }>
}>()
const activeIndex = ref(0)
const sectionRefs = ref<HTMLElement[]>([])
// const sections = ref([
//   {
//     title: '课程简介',
//     content:
//       '这节课主要围绕园艺植物保护学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。 这节课主要围绕耕作学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。'
//   },
//   {
//     title: 'AI课程介绍',
//     content:
//       '《园艺植物保护学》是一门在园艺学科体系里有着关键地位的课程，它围绕园艺植物保护这一核心，将各类相关知识与实用技能有机融合。课程详细讲授了应对有害生物、防治植物病害等多方面内容，如同为园艺植物打造了一套坚实的 “防护铠甲”，助力它们茁壮成长，保障园艺生产能够收获优质且高产的成果。在害虫防治方面，课程全面且深入地涵盖了常见害虫的诸多知识要点。从各类害虫的种类、形态特征、危害特点、生活史，到行之有效的具体防治方法，均有详尽的讲解。例如，针对天牛、李小石心虫等果实害虫，细致剖析其危害作物范围、特征、发生代数等关键信息，从而清晰地呈现出综合防控的思路与方法；对于介壳虫、叶蝉、蓟马等害虫，也分别从它们的发生代数、危害方式、传毒特点以及对应的防治重点与措施等角度进行细致阐述。同时，还深度探究了害虫防治的多种途径，包含生物防治（如经典生物防治、保育、增益及利用生物农药等）、物理防治（利用机械捕杀、温度控制等手段）以及化学防治（提及 3R 问题、农药种类、选药原则等），并结合小菜蛾、菜青虫等常见害虫案例，进一步强化对防治要点的把握。此外，还涉及昆虫分类与识别、昆虫监测与预测等专业内容，像介绍昆虫在田间的分布类型与抽样方案制定的关联，讲解发生期、发生量的预测方法等，为更科学精准地开展害虫防治工作提供有力支撑。在植物病害相关知识板块，课程同样有着丰富且详实的内容。先是对众多植物病害，如柑橘黄龙病、病毒病、白粉病、锈病等进行深度剖析，细致讲解它们被列为检疫性病害的原因、具体的症状表现、传播途径以及相应的防治手段等。对于植物病害发生的整个过程，从病原物侵入前期到发病期各阶段的特点及影响因素也逐一进行系统阐述，还介绍了如垂直抗病性、水平抗病性等植物抗病相关概念，以及植物与病原物互作模式等重要知识。同时，针对蔬菜、果树等不同园艺植物常见病害，像蔬菜的白霉病、灰霉病，果树的梨锈病等，详细说明其症状表现、发病规律，并传授选用抗病品种、合理轮作、正确使用农药等贴合实际的防治方法。另外，还涵盖了植物病毒、菌物、细菌和病毒病害等多方面知识，例如病毒的理化特性、复制过程、分类规则，菌物的生活史、分类及命名规则，细菌病害的症状特点、鉴定方法等内容，全方位构建起植物病害防治知识体系。不仅如此，课程还对昆虫的身体结构、内部系统、生长发育等基础知识进行了系统且有条理的讲解，涵盖昆虫的口气类型、胸部结构、消化系统、神经系统等诸多内容，这有助于深入理解昆虫的生理构造与生命活动规律，为更好地识别昆虫以及依据昆虫习性开展高效的防治工作筑牢基础。总而言之，《园艺植物保护学》这门课程为学习者开启了一扇通往园艺植物保护专业领域的大门，通过系统深入地学习其中的知识，学习者能掌握扎实全面的专业本领，在面对种类繁多的有害生物和错综复杂的植物病害时，做到精准辨别、有效应对，运用科学合理的防治策略守护园艺植物的健康，推动园艺产业沿着可持续发展的道路稳步前行，在丰富人们生活、美化环境等诸多方面持续发挥重要价值。'
//   },
//   {
//     title: '公开课程简介',
//     content:
//       '这节课主要围绕园艺植物保护学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。 这节课主要围绕耕作学展开，老师首先提醒考试相关事宜，强调熟悉课本。接着讲解不同种植制度下耕地物质平衡，包括自然途径中土壤肥力的产生与发展，以及不同根基情况对土壤肥力的影响。还阐述了培肥土壤的方法，如生物培肥、化学培肥等，以及肥料利用率的相关知识和平衡计算公式。之后介绍国家耕作制度的规划、发展、区划原则和具体分区情况。最后回顾课程重点，如间套作、复种、轮作等概念及相关原理，并指导应对考试的方法。'
//   }
// ])
const isProgrammaticScroll = ref(false)
// 设置节引用
const setSectionRef: any = (el: HTMLElement, index: number) => {
  if (el) {
    sectionRefs.value[index] = el
  }
}
onMounted(() => {
  // 初始化节引用
  sectionRefs.value = []
  // 监听页面滚动
  window.addEventListener('scroll', handlePageScroll)
})

// 点击左侧导航滚动到对应位置
const scrollToSection = async (index: number) => {
  // 设置滚动标志
  isProgrammaticScroll.value = true
  activeIndex.value = index
  await nextTick()
  const sectionElement = sectionRefs.value[index]
  if (!sectionElement) {
    isProgrammaticScroll.value = false
    return
  }
  const navigationHeight = 120
  const extraOffset = 20
  const targetPosition =
    sectionElement.offsetTop - navigationHeight - extraOffset
  const safePosition = Math.max(0, targetPosition)

  window.scrollTo({
    top: safePosition,
    behavior: 'smooth'
  })
  // 滚动完成后重置标志
  setTimeout(() => {
    isProgrammaticScroll.value = false
  }, 800)
}

// 页面滚动事件处理
const handlePageScroll = () => {
  // 如果是点击触发的滚动，跳过处理
  if (isProgrammaticScroll.value) return
  const scrollTop = window.pageYOffset || document.documentElement.scrollTop
  const viewportHeight = window.innerHeight
  const documentHeight = document.documentElement.scrollHeight
  // 底部检测
  if (window.innerHeight + scrollTop >= documentHeight - 100) {
    activeIndex.value = props.sections.length - 1
    return
  }
  // 检测逻辑
  let closestIndex = 0
  let minDistance = Infinity
  for (let i = 0; i < sectionRefs.value.length; i++) {
    const section = sectionRefs.value[i]
    if (!section) continue

    const sectionTop = section.offsetTop
    const distance = Math.abs(scrollTop + viewportHeight * 0.3 - sectionTop)

    if (distance < minDistance) {
      minDistance = distance
      closestIndex = i
    }
  }
  if (activeIndex.value !== closestIndex) {
    activeIndex.value = closestIndex
  }
}

// 添加防抖优化性能
let scrollTimeout: number
const debouncedHandleScroll = () => {
  clearTimeout(scrollTimeout)
  scrollTimeout = setTimeout(handlePageScroll, 50)
}

// 更新事件监听
onMounted(() => {
  window.addEventListener('scroll', debouncedHandleScroll)
})

onBeforeUnmount(() => {
  window.removeEventListener('scroll', debouncedHandleScroll)
})
</script>

<style lang="scss" scoped>
// 课程概述
.course-overview {
  margin-top: 24px;
  padding: 40px 64px;
  box-sizing: border-box;
  border-radius: 12px;
  .overview-left {
    width: calc(((100% - 48px) / 100) * 12);
    height: 368px;
    border-radius: 10px;
    border: 1px solid #e6ebf0;
    position: sticky;
    top: 120px;
    z-index: 99;
    padding-top: 16px;
    box-sizing: border-box;
    .nav-item {
      height: 22px;
      line-height: 22px;
      padding-left: 28px;
      box-sizing: border-box;
      margin-top: 18px;
      margin-bottom: 18px;
      border-left: 4px solid #fff;
    }
    .active {
      font-weight: 600;
      color: #0f63ed;
      position: relative;
      &::before {
        content: '';
        position: absolute;
        left: -4px;
        top: 50%;
        transform: translateY(-50%);
        width: 4px;
        height: 24px;
        background-color: #0f63ed;
        border-top-right-radius: 14px;
        border-bottom-right-radius: 14px;
      }
    }
  }
  .overview-right {
    width: calc(((100% - 48px) / 100) * 88);
    margin-left: 48px;
    .content-section {
      margin-bottom: 60px; // 增加间距便于滚动定位
      scroll-margin-top: 140px; // 滚动边距，避免被固定导航遮挡
    }
    .right-title {
      margin-top: 24px;
      margin-bottom: 26px;
      display: inline-block;
      font-family:
        Alimama ShuHeiTi,
        Alimama ShuHeiTi;
      font-weight: bold;
      font-size: 24px;
      color: #18191a;
      line-height: 30px;
      text-align: left;
      border-bottom: 2px solid #0f63ed;
    }
  }
}
</style>
